import React, { useState,useEffect } from 'react'
import { Image } from 'antd';
import { Button, Modal } from 'antd';
import './Css/Model.css'

export default function Pop_up_layers(props) {
    const { model_type, updatmodel_type,after_data } = props
    console.log(after_data);
    
    return (
        <div>
            <Modal
                title="售后申请"
                style={{ top: 30,maxHeight:500,backgroundColor:'red' }}
                open={model_type}
                onOk={() => updatmodel_type(false)}
                onCancel={() => updatmodel_type(false)}
                width={1000}
                // cancelText="取消"
                footer={null}
            >
                <p className='modal_title'>申请信息</p>
                <div className='model_table'>
                    <div>
                        <span>申请ID：{after_data._id}</span>
                        <span>关联订单：{after_data.order_id}</span>
                        <span>状态：{after_data.After_sales_state}</span>
                    </div>
                    <div>
                        <span>商品名称：{after_data.shop_name}</span>
                        <span>商品价格：{after_data.shop_price}元</span>
                        <span>售后类型：{after_data.After_sales_type}</span>
                    </div>
                    <div>
                        <span>售后原因：{after_data.After_sales_type_cause}</span>
                        <span>申请金额：{after_data.The_amount_requested}元</span>
                        <span>问题描述：{after_data.Problem_description}</span>
                    </div>
                    <div style={{ paddingLeft: '0.5rem' }}>
                        <p>申请凭证：</p>
                        <Image
                            style={{ marginLeft: '1.2rem',marginBottom:'1rem' }}
                            width={200}
                            src={after_data.Request_vouchers}
                        />
                    </div>

                </div>
                <p className='modal_title'>退款信息</p>
                <div className='model_table'>
                    <span>退款金额：{after_data.Refund_amount}</span>
                    <span>退货渠道：{after_data.Refund_Channels}</span>
                    <span>佣金影响：申请中</span>
                </div>
                <p className='modal_title'>历史进度</p>
                <div className='model_table'>
                    <span>申请时间:{after_data.Application_timeline}</span>
                    <span>审核时间：{after_data.Review_time}</span>
                    <span>退款时间：{after_data.Refund_time}</span>
                </div>
                <p className='modal_title'>审核情况</p>
                <div className='model_table'>
                    <p >审核结果:{after_data.Audits}</p>
                </div>
            </Modal>
        </div>
    )
}
